<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
				cursor: move;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script>
			// 获取元素
			var num = document.querySelector('div');
			// 当鼠标按下，就获得鼠标在盒子内的坐标
			// 这里要给div添加事件，如果给document添加的话，你不点击div ,
			// 点击了空白区域，这个div也是会移动的，所以这里要给div加点击事件。
			num.addEventListener('mousedown', function(e) {
				var x = e.pageX - num.offsetLeft;
				var y = e.pageY - num.offsetTop;
				// 鼠标移动的时候，把鼠标在页面中的坐标减去鼠标在盒子没的坐标就是div的left和top值
				// 这里是给document添加事件，而不是给div ，如果给div加事件当鼠标的移动速度过快，
				// 鼠标会脱离div导致效果不理想，当给document添加时不管你移动的多快，鼠标都不会离开div
				document.addEventListener('mousemove', move)

				function move(e) {
					num.style.left = e.pageX - x + 'px';
					num.style.top = e.pageY - y + 'px';
				}
				// 鼠标弹起，就让鼠标移动事件移除
				document.addEventListener('mouseup', function() {
					document.removeEventListener('mousemove', move)
				})
			})
		</script>
	</body>
</html>
